<template>
    <div>
        <el-container>
            <!-- 头部 -->
            <el-header height="70px">
                xxxxx大型后台管理系统
                <div class="user" @mouseenter="enterUser" @mouseleave="leaveUser">
                    <i class="el-icon-user"></i>
                    <!-- {{ $store.getters.getUserInfo.username }} -->
                    <el-dropdown @command="logout">
                        <span class="el-dropdown-link">
                            {{ $store.getters.getUserInfo.username }}
                            <i v-if="tag" class="el-icon-arrow-up el-icon--right"></i>
                            <i v-else class="el-icon-arrow-down el-icon--right"></i>

                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-circle-close" command="1">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                  
                </div>
            </el-header>

            <!-- 主体部分-->
            <el-container>
                <!-- 左侧侧边栏 -->
                <v-nav></v-nav>
                <el-main>
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import vNav from '../components/vNav.vue';
export default {
    data() {
        return {
            tag: false,//展开状态值
        }
    },
    methods: {
        // 退出登录
        logout(com) {
            // 接收回调参数  如果com==1 才会执行退出登录
            if (com == 1) {
                this.$message.success('退出成功')
                // 调用仓库中的CHANGE_USERINFO清除缓存
                this.$store.commit('CHANGE_USERINFO', false);
                // 跳转登录页面
                this.$router.push('/login');
            }

        },
        // 划入事件  更改tag值
        enterUser() {
            this.tag = true;
        },
        // 滑出事件  更改tag值
        leaveUser() {
            this.tag = false;
        }
    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {
        vNav
    },
}
</script>
<style lang="less" scoped>
.el-header {
    background-color: antiquewhite;
    font-size: 25px;
    // background-color: pink;
    line-height: 60px;
    text-align: center;
}

.el-aside {
    height: 600px;

    .el-col {
        height: 100%;

        .el-menu-vertical-demo {
            height: 100%;

        }
    }
}

.user {
    font-size: 20px;
    margin-right: 20px;
    float: right;


}

.el-icon-user {
    font-size: 20px;
    // margin-right: 10px;
}
</style>